<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<title>成程科技集团-集团要闻</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="description" content="成程科技集团 成程 成程科技 集团要闻">
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css//swiper-4.4.2.min.css" />
	<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src='js/modernizr.custom.js'></script>
	<script type="text/javascript" src="js/more.js"></script>
	<script type="text/javascript" src="js/swiper-4.4.2.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src='js/app.js'></script>
	<script type="text/javascript" src='js//bootstrap.min.js'></script>
	<style>
		.index-header {
			position: relative;
			/* Ensure it doesn't overlap with other elements */
			z-index: 10;
			/* Make sure it is above other content */
			border-radius: 0;
			width: 100%;
		}

		.index-logo img {
			max-width: 200px;
			height: auto;
		}

		.navbar-custom {
			background-color: rgba(37, 155, 217, 0.8);
			/* Slight transparency */
			border-radius: 20px;
			padding: 0px 10px;
		}

		.navbar-nav .nav-link {
			color: aliceblue;
			padding: 10px 15px;
		}

		/* .navbar-nav .nav-link.active {
			border-bottom: 2px solid rgba(255, 255, 255, 0.4);
		} */

		.active {
			color: #000000;
		}

		@media (max-width: 768px) {
			.index-logo img {
				max-width: 180px;
			}

			.navbar-nav {
				text-align: center;
			}

			.navbar-nav .nav-link {
				display: block;
				padding: 10px;
			}
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {


			const pageSize = 8; // 每页显示的项目数量
			let allData = []; // 存储所有数据
			let currentPage = 1; // 当前页码

			// 获取数据
			$.get(`${host}/iot/files/list?pageNum=1&pageSize=3000000&picsId=11`, (data) => {
				allData = data['rows']; // 保存所有数据
				console.log('所有数据:', allData);

				// 计算总页数
				const totalItems = allData.length;
				const totalPages = Math.ceil(totalItems / pageSize);

				// 渲染分页控件
				renderPagination(totalPages);

				// 默认加载第一页的数据
				loadPage(1);
			});

			// 渲染分页控件的函数
			function renderPagination(totalPages) {
				const pagination = $('#pagination');
				pagination.empty();

				// 创建页码按钮
				const pageNumbers = [];
				for (let i = 1; i <= totalPages; i++) {
					pageNumbers.push(i);
				}

				// 如果页码过多，显示前几个页码、当前页和后几个页码
				if (totalPages <= 7) {
					pageNumbers.forEach(num => {
						pagination.append(createPageItem(num));
					});
				} else {
					if (currentPage <= 4) {
						for (let i = 1; i <= 5; i++) {
							pagination.append(createPageItem(i));
						}
						pagination.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
						pagination.append(createPageItem(totalPages));
					} else if (currentPage > totalPages - 4) {
						pagination.append(createPageItem(1));
						pagination.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
						for (let i = totalPages - 4; i <= totalPages; i++) {
							pagination.append(createPageItem(i));
						}
					} else {
						pagination.append(createPageItem(1));
						pagination.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
						for (let i = currentPage - 1; i <= currentPage + 1; i++) {
							pagination.append(createPageItem(i));
						}
						pagination.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`);
						pagination.append(createPageItem(totalPages));
					}
				}

				// 处理页码点击事件
				$('.page-link').click(function (event) {
					event.preventDefault(); // 阻止默认链接行为
					const pageNumber = $(this).data('page');
					if (pageNumber && pageNumber !== currentPage) {
						currentPage = pageNumber;
						$('.page-item').removeClass('active'); // 移除所有页码的黑色
						$(this).parent().addClass('active'); // 当前页码设置为黑色
						loadPage(pageNumber); // 加载指定页的数据

						// 如果点击的页码是第一页，取消第一页的黑色
						if (currentPage !== 1) {
							$('#pagination li:first-child').removeClass('active');
						}
					}
				});
			}

			// 创建单个页码项的函数
			function createPageItem(pageNumber) {
				return `<li class="page-item ${pageNumber === currentPage ? 'active' : ''}">
                <a class="page-link" href="#" data-page="${pageNumber}">${pageNumber}</a>
            </li>`;
			}

			// 加载指定页的数据
			function loadPage(pageNumber) {
				const start = (pageNumber - 1) * pageSize; // 当前页的起始索引
				const end = start + pageSize; // 当前页的结束索引
				const pageItems = allData.slice(start, end); // 当前页的数据

				// 清空当前内容区域
				$('#content').empty();

				const rows = [];
				for (let i = 0; i < pageItems.length; i += 4) {
					rows.push(pageItems.slice(i, i + 4));
				}

				// 渲染当前页的数据
				rows.forEach(row => {
					const rowHtml = `
                <div class="g-0 col-sm-12 row d-flex justify-content-center" style="padding: 0;">
                    ${row.map((item, index) => `
                        <div class="col newcbg" style="padding: 0;">
                            <a href="${item.content.slice(3,item.content.length - 4)}" style="color: black;">
                                <img id="nimg${start + index + 1}" src="${host}${item.url}" class="center-h">
                                <div id="ntitle${start + index + 1}" class="center-hp">
                                    ${item.name}
                                </div>
                            </a>
                        </div>
                    `).join('')}
                </div>`;
					$('#content').append(rowHtml);
				});
			}

			// 处理侧边广告数据（假设这个代码与你的分页无关，但在同一页面中）
			$.get(host + '/iot/pics/list?pageNum=1&pageSize=30', (data) => {
				var list = data['rows'];
				var img1, img2, img3;
				var fimg1, fimg2;
				var cimg1, cimg2, cimg3, cimg4, cimg5;
				var cimg6, cimg7, cimg8, cimg9, cimg10;

				for (let i = 0; i < list.length; i++) {
					if (list[i].type == '103') {
						imgArray = list[i].url.split(",");
						document.getElementById("fimg1").src = host + imgArray[0];
						document.getElementById("fimg2").src = host + imgArray[1];
						document.getElementById("tel").innerHTML = list[i].stra;
						document.getElementById("addr").innerHTML = list[i].strb;
						document.getElementById("outurl1").innerHTML = list[i].strc.split("#")[0];
						document.getElementById("outurl1").href = list[i].strc.split("#")[1];
						document.getElementById("outurl2").innerHTML = list[i].strd.split("#")[0];
						document.getElementById("outurl2").href = list[i].strd.split("#")[1];
						document.getElementById("outurl3").innerHTML = list[i].stre.split("#")[0];
						document.getElementById("outurl3").href = list[i].stre.split("#")[1];
					}
					// if (list[i].type == '201') {
					// 	imgArray = list[i].url.split(",");
					// 	document.getElementById("img1").src = host + imgArray[0];
					// 	document.getElementById("img2").src = host + imgArray[1];
					// 	document.getElementById("img3").src = host + imgArray[2];
					// }
				}
			});
			$.get(host + '/iot/nav/treeselect?parentId=3', data => {
				console.log(data, '11111');
				var list = data['data'];
				let imghtml = ''
				for (let i = 0; i < list.length; i++) {
					if (list[i].toUrl) {
						imghtml = imghtml + `<div class="swiper-slide">
						<a  href="${list[i].toUrl}"><img src="${host + list[i].picUrl}" alt="" /></a>
						</div>`
					} else {
						imghtml = imghtml + `<div class="swiper-slide">
					       <img src="${host + list[i].picUrl}" alt="" />
						</div>`
					}
				}
				elempr = document.getElementById('homeimg');
				console.log(elempr, 'elemprelempr');
				elempr.innerHTML = imghtml;
			});

		}
	</script>

</head>

<body>
	<div class=" index-header">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container-fluid d-flex align-items-center">
				<div class="index-logo">
					<a href="index.html"><img src="imgs/logo.png" alt="Logo" /></a>
				</div>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
					aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarCollapse">
					<ul class="navbar-nav ms-auto">
						<li class="nav-item"><a href="index.html" class="nav-link ">首页</a></li>
						<li class="nav-item"><a href="about.html" class="nav-link ">集团简介</a></li>
						<li class="nav-item"><a href="news.html" class="nav-link active">集团要闻</a></li>
						<li class="nav-item"><a href="products.html" class="nav-link">集团产品</a></li>
						<li class="nav-item"><a href="program.html" class="nav-link">项目发展</a></li>
						<li class="nav-item"><a href="science.html" class="nav-link">科研成果</a></li>
						<li class="nav-item"><a href="pharmacy.html" class="nav-link">药效学成果</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
	<div id="bloc" class="container-fluid g-0">
		<!--big new-->
		<article id="index">
			<div class="banner-position g-0">
				<div class="index-banner swiper-container">
					<div class="swiper-wrapper" id="homeimg">

					</div>
					<!-- Add Navigation -->
					<div class="swiper-button-prev swiper-button-white"></div>
					<div class="swiper-button-next swiper-button-white"></div>
				</div>
			</div>
			<div class="clear"></div>
			<!--news-->

			<div class="g-0 " style="padding: 0;">
				<img src="imgs/news_01.png" class="g-0">
			</div>
			<div class="clear"></div>
			<div id="content" style="padding: 0;">

			</div>

			<div class="clear"></div>
			<div class="g-0 col-sm-12 row " style="padding: 0;">
				<div class="col-11" style="padding: 0;"></div>
				<div class="col-1" style="width: 100px;">
					<nav aria-label="...">
						<ul class="pagination" style="position: relative; right: 70px;" id="pagination"></ul>
					</nav>
				</div>
				<div class="g-0 col-sm-12 " style="padding: 0;">
					<img src="imgs/news_03.png" class="g-0 col-sm-12">
				</div>
				<div class="clear"></div>
				<!--foot-->
				<div class="g-0 col-sm-12 fbg row" style="padding: 0;">
					<div class="g-0 col-sm-4"></div>
					<div class="g-0 col-sm-2" style="color: #fff;margin-top: 100px;margin-left: 50px;">
						<p>
							<h5>联系我们</h5>
						</p>
						<p id="tel"></p>
						<p id="addr"></p>
						<p>备案号: <a id="outurl0">黑ICP备2024022673号</a>
						</p>
					</div>
					<div class="g-0 col-sm-2" style="color: #fff;margin-top: 100px;margin-left: 50px;">
						<p>
							<h5>友情链接</h5>
						</p>
						<p><a id="outurl1">碳方会</>
						</p>
						<p><a id="outurl2">成程碳方中医诊所</a></p>
						<p><a id="outurl3">黑龙江省中医抗癌协会</a></p>
					</div>
					<div class="g-0 col-sm-1 fix ma"><img id="fimg1" src=""></div>
					<div class="g-0 col-sm-1 fix ma" style="margin-top: 100px;margin-bottom: 100px;"><img id="fimg2"
							src="">
					</div>
					<div class="g-0 col-sm-1 fix ma" style="margin-top: 100px;margin-bottom: 100px;height: 7.5rem;"><img
							src="imgs/ccfwdz.png">
					</div>
					<div class="g-0 col-sm-2"></div>
				</div>
				<div class="clear"></div>
		</article>
	</div>




	<script type="text/javascript">
		var swiper = new Swiper('.index-banner.swiper-container', {
			speed: 600,
			parallax: true,
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			loop: true,
			autoplay: {
				delay: 3000,
				disableOnInteraction: false //false时，用户操作后重新轮播
			},
			observer: true, //修改swiper自己或者子元素时，自动初始化
			observeParents: true //修改swiper的父元素时，自动初始化swiper
		});
	</script>
</body>

</html>